<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>权限管理</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>

  <body>
    <div style="padding: 16px">
      <div class="layui-card">
        <div class="layui-card-body">
          <table
            class="layui-hide"
            id="rights-table"
            lay-filter="rights-table"
          ></table>
        </div>
      </div>
    </div>
    <script type="text/html" id="rights-toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="rights-toolbar-add">
          新增权限
        </button>
      </div>
    </script>
    <script type="text/html" id="rights-tool">
      <div class="layui-btn-container">
        <button
          class="layui-btn layui-btn-sm layui-bg-blue"
          lay-event="rights-tool-edit"
        >
          编辑
        </button>
        <button
          class="layui-btn layui-btn-sm layui-bg-red"
          lay-event="rights-tool-del"
        >
          删除
        </button>
      </div>
    </script>
    <form
      class="layui-form"
      lay-filter="rights-form"
      id="rights-form"
      style="padding: 15px; display: none"
    >
      <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="id"
            value="0"
            lay-verify="required"
            placeholder="请输入权限名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">权限名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            lay-verify="required"
            placeholder="请输入权限名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">权限标识</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="code"
            autocomplete="off"
            placeholder="请输入权限标识"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">权限类型</label>
        <div class="layui-input-block">
          <input
            type="radio"
            name="type"
            value="menu"
            title="菜单"
            lay-filter="form-rights-filter"
            checked
          />
          <input
            type="radio"
            name="type"
            value="path"
            title="路由"
            lay-filter="form-rights-filter"
          />
          <input
            type="radio"
            name="type"
            value="auth"
            title="权限"
            lay-filter="form-rights-filter"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-inline">
          <input
            type="text"
            name="icon_sign"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">访问地址</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="url"
            lay-verify=""
            placeholder="请输入访问地址"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <input
            type="checkbox"
            name="status"
            lay-skin="switch"
            lay-filter="rights-row-status"
            checked
            title="启用|禁用"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-inline">
          <input
            type="text"
            name="sort"
            placeholder=""
            autocomplete="off"
            class="layui-input"
            value="1"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">打开方式</label>
        <div class="layui-input-inline">
          <select name="open_type" id="">
            <option value="_component" selected>默认方式</option>
            <option value="_blank">新窗口</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">父元素 ID</label>
        <div class="layui-input-inline">
          <input
            type="text"
            name="pid"
            placeholder=""
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button
            type="submit"
            class="layui-btn"
            lay-submit
            lay-filter="rights-form-btn"
          >
            立即提交
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <script>
      layui.use(function () {
        var treeTable = layui.treeTable;
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;

        treeTable.render({
          elem: "#rights-table",
          id: "rights-table",
          url: "/api/v1/rights?type=treetable", // 此处为静态模拟数据，实际使用时需换成真实接口
          height: "full-35", // 最大高度减去其他容器已占有的高度差
          toolbar: "#rights-toolbar",
          cols: [
            [
              { type: "checkbox", fixed: "left" },
              {
                field: "id",
                title: "ID",
                width: 80,
                sort: true,
                fixed: "left",
              },
              { field: "name", title: "权限名", width: 180 },
              { field: "code", title: "权限标识", width: 150 },
              {
                field: "type",
                title: "类型",
                width: 100,
                templet: (d) => {
                  if (d.type === "menu") {
                    return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius">菜单</button>`;
                  } else if (d.type === "path") {
                    return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">路径</button>`;
                  } else if (d.type === "auth") {
                    return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-purple">权限</button>`;
                  }
                },
              },
              { field: "url", title: "访问地址", width: 200 },
              {
                field: "icon_sign",
                title: "图标",
                width: 90,
                templet: (d) => {
                  return `<i class="${d.icon_sign}"></i> `;
                },
              },
              { field: "open_type", title: "打开方式", width: 100 },
              { field: "sort", title: "排序", width: 100 },
              {
                field: "status",
                title: "状态",
                width: 100,
                templet: (d) => {
                  return `<input type="checkbox" name="status" value="${
                    d.id
                  }" title="启用|禁用" lay-skin="switch" ${
                    d.status ? "checked" : ""
                  } lay-filter="rights-table-switch-status"/>`;
                },
              },
              {
                fixed: "right",
                title: "操作",
                width: 120,
                align: "center",
                toolbar: "#rights-tool",
              },
            ],
          ],
          page: true,
        });

        treeTable.on("toolbar(rights-table)", function (obj) {
          if (obj.event === "rights-toolbar-add") {
            $("#rights-form")[0].reset();
            layer.open({
              type: 1,
              shade: false,
              content: $("#rights-form"),
              area: ["50%", "80%"],
            });
            form.render($("#rights-form"));
          }
        });

        // 提交事件
        form.on("submit(rights-form-btn)", function (data) {
          let field = data.field;
          field.status = !!field.status;
          let method, url;
          if (field.id == 0) {
            field.id = null;
            method = "POST";
            url = "/api/v1/rights";

            if (field.type === "path") {
              if (!/\//.test(field.url)) {
                layer.msg("url 不符合格式");
                return false;
              }
            } else if (field.type === "auth") {
              console.log(field.pid);
              if (!field.pid || field.pid === "0") {
                layer.msg("权限必须填入父级 id");
                return false;
              }
            }
          } else {
            method = "PUT";
            url = `/api/v1/rights/${field.id}`;
          }
          $.ajax({
            url: url,
            type: method,
            contentType: "application/json",
            headers: {
              "X-CSRF-TOKEN": getCookie("csrf_access_token"),
            },
            data: JSON.stringify(field),
            success: function (res) {
              if (!res.code) {
                layer.closeAll();
                treeTable.reloadData("rights-table");
              }
            },
          });

          return false; // 阻止默认 form 跳转
        });

        treeTable.on("tool(rights-table)", function (obj) {
          var layEvent = obj.event;
          if (layEvent === "rights-tool-edit") {
            form.val("rights-form", obj.data);
            layer.open({
              type: 1,
              shade: false,
              content: $("#rights-form"),
              area: ["50%", "80%"],
            });
          } else if (layEvent === "rights-tool-del") {
            $.ajax({
              url: `/api/v1/rights/${obj.data.id}`,
              type: "DELETE",
              contentType: "application/json",
              headers: {
                "X-CSRF-TOKEN": getCookie("csrf_access_token"),
              },
              success: function (res) {
                if (!res.code) {
                  treeTable.reloadData("rights-table");
                }
              },
            });
          }
        });

        form.on("radio(form-rights-filter)", function (data) {
          var elem = data.elem;
          var value = elem.value;

          switch (value) {
            case "menu":
              $('[name="icon_sign"]').parent().parent().show();
              $('[name="url"]').parent().parent().hide();
              break;
            case "path":
              $('[name="icon_sign"]').parent().parent().hide();
              $('[name="url"]').parent().parent().show();
              break;
            case "auth":
              $('[name="url"]').parent().parent().hide();
              $('[name="icon_sign"]').parent().parent().hide();
              break;
          }
        });
      });
    </script>
  </body>
</html>
